<template>
	<view class="content">
		<view class="top-box">
			<!-- @click="nowqiandao" -->
			<view class="qiandao" style="background-color: transparent;">
				<tn-icon name="location" size="28" offset-top="1" style="margin-right: 3rpx;" />
				<text>今日签到</text>
			</view>
			<view @click="upmonth">
				<tn-icon name="left-circle-simple-fill" size="40" type="info" />
			</view>
			<view style="padding-bottom: 2rpx;">{{year}}年{{month+1}}月</view>
			<view @click="downmonth">
				<tn-icon name="right-circle-simple-fill" size="40" type="info" />
			</view>
			<view class="jinri qiandao" @click="tojinri">
				<tn-icon name="revoke" size="28" offset-top="1" style="margin-right: 3rpx;" />
				<text>返回今日</text>
			</view>
		</view>
		<view class="weeks-box ">
			<view class="week-item " v-for="(item,index) in weeks" :key="index">
				{{item.name}}
			</view>
		</view>
		<view class="day-box ">
			<!-- 上个月末尾的天数 -->
			<view class="tian upday" :class="[isclickday==item.nyr?'isactive':'',item.isqiandao?'isqiandao':'']"
				@click="clickri(item)" v-for="(item,index) in updays" :key="index">
				{{item.days}}
			</view>
			<!-- 当月的天数 -->
			<view class="tian nowday"
				:class="[item.nyr==nownyr?'jinri':'',isclickday==item.nyr?'isactive':'',item.isqiandao?'isqiandao':'']"
				@click="clickri(item)" v-for="(item,index) in nowdays" :key="index">
				{{item.days}}
			</view>
			<!-- 下个月开头的天数  nextdays -->
			<view class="tian  downday" :class="[isclickday==item.nyr?'isactive':'',item.isqiandao?'isqiandao':'']"
				@click="clickri(item)" v-for="(item,index) in nextdays" :key="index">
				{{item.days}}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		getSignMarkApi
	} from "@/request/worktop/index.js"
	import {
		onMounted,
		ref,
		toRef
	} from 'vue';
	const nowdate = new Date();
	// 获取当前年
	const year = ref(nowdate.getFullYear())
	// 获取当前月
	const month = ref(nowdate.getMonth())
	// 获取当月的1号是星期几
	const weekdate = ref()
	// 获取当前月最后一天的号数
	const nowlastday = ref()
	// 获取今日数据
	const day = ref(nowdate.getDate())
	// 获取当前年月日
	const nownyr = ref('')
	// 当月的天数数据
	const nowdays = ref([])
	// 下个月的天数数据
	const nextdays = ref([])
	// 上月的天数数据
	const updays = ref([])
	// 定义点击的class
	const isclickday = ref('')
	// 签到的日期数组
	const daindaoarr = ref([])
	const a = ref(['a'])
	// 周期
	const weeks = ref([{
			id: 0,
			name: '日'
		},
		{
			id: 1,
			name: '一'
		},
		{
			id: 2,
			name: '二'
		},
		{
			id: 3,
			name: '三'
		},
		{
			id: 4,
			name: '四'
		},
		{
			id: 5,
			name: '五'
		},
		{
			id: 6,
			name: '六'
		},
	]);
	const currentSelectDate = ref('')

	onMounted(() => {
		const date = new Date()
		const year = date.getFullYear()
		const month = String(date.getMonth() + 1).padStart(2, '0')
		currentSelectDate.value = `${year}年${month}月`

		initqiandao()
		getnownyr()
	})

	const emit = defineEmits(['qiandaodays', 'clickday', 'getDateValue'])

	// 获取当前月份打卡标记
	const getSignMark = () => {
		getSignMarkApi(currentSelectDate.value + '01日').then(res => {
			daindaoarr.value = res.result.filter(item => {
				return item.morningStart !== 2 && item.nightStart !== 2
			}).map(i => {
				return i.dateTime
			}).map(date => {
				return date.replace(/-(0)?(\d)-/, '-$2-').replace(/-(0)?(\d)$/, '-$2');
			})
			huoqulastday()
		})
	}
	defineExpose({
		getSignMark
	})
	// 初始化签到数据
	const initqiandao = () => {
		getSignMark()
	}
	// 获取当前年月日
	const getnownyr = () => {
		let date = new Date();
		let nian = date.getFullYear();
		let yue = date.getMonth()
		let ri = date.getDate()
		let nyr = nian + '-' + (yue + 1) + '-' + ri
		nownyr.value = nyr
	}
	// 点击今日签到按钮
	const nowqiandao = () => {
		let index = (daindaoarr.value).indexOf(nownyr.value)
		if (index == -1) {
			daindaoarr.value.push(nownyr.value)
			huoqulastday()
			uni.showToast({
				title: '签到成功'
			})
		} else {
			uni.showToast({
				title: '已签到'
			})
		}
		let arr = (nownyr.value).split("-");
		let info = {
			nyrinfo: {
				nian: arr[0],
				yue: arr[1],
				day: arr[2],
				nyr: nownyr.value
			},
			qiandaoarr: daindaoarr.value
		}
		emit('qiandaodays', info)
	}
	// 点击日期 isclick
	const clickri = (item) => {
		if (item.nyr == nownyr.value) {
			// nowqiandao()
		}
		isclickday.value = item.nyr
		let info = {
			nyrinfo: {
				nian: item.nian,
				yue: item.yue,
				day: item.days,
				nyr: item.nyr
			},
			qiandaoarr: daindaoarr.value
		}
		emit('clickday', info)
	}
	// 点击上个月
	const upmonth = () => {
		if (month.value <= 0) {
			month.value = 11
			year.value = year.value - 1
		} else {
			month.value = month.value - 1
		}
		currentSelectDate.value = `${year.value}年${String(month.value+1).padStart(2,'0')}月`
		emit('getDateValue', getDateValue(year.value, month.value))
		getSignMark()
	}
	// 点击下个月
	const downmonth = () => {
		if (month.value >= 11) {
			month.value = 0
			year.value = year.value + 1
		} else {
			month.value = month.value + 1
		}
		currentSelectDate.value = `${year.value}年${String(month.value+1).padStart(2,'0')}月`
		emit('getDateValue', getDateValue(year.value, month.value))
		getSignMark()
	}
	// 返回年月
	const getDateValue = (year, month) => {
		const formattedMonth = String(month + 1).padStart(2, '0');
		return `${year}年${formattedMonth}月`;
	}
	//跳转到今日
	const tojinri = () => {
		const nowdate1 = new Date()
		year.value = nowdate1.getFullYear()
		month.value = nowdate1.getMonth()
		currentSelectDate.value = `${year.value}年${String(month.value+1).padStart(2,'0')}月`
		emit('getDateValue', getDateValue(year.value, month.value))
		getSignMark()
	}
	// 获取天数
	const huoqulastday = () => {
		const nian = year.value
		const yue = month.value
		const ri = day.value
		// 当前月的总天数
		nowlastday.value = new Date(nian, yue + 1, 0).getDate();

		// 当月的天数数据
		const daynum = []
		for (let i = 1; i <= nowlastday.value; i++) {
			let nyr = nian + '-' + (yue + 1) + '-' + i
			let index = (daindaoarr.value).indexOf(nyr)
			let qiandao = false
			if (index != -1) {
				qiandao = true
			}
			daynum.push({
				isqiandao: qiandao,
				nian,
				yue: yue + 1,
				days: i,
				nyr: nian + '-' + (yue + 1) + '-' + i
			})
		}
		nowdays.value = daynum

		//获取上个月的数据
		// 当前月的1号是星期几
		weekdate.value = new Date(nian, yue, 1).getDay()
		// 获取上个月的总天数
		let upzongdays = new Date(nian, yue, 0).getDate();
		// 要显示的上个月的开始号数
		let upnums = upzongdays - weekdate.value + 1
		if (weekdate.value == 0) {
			updays.value = []
		}
		const upnuminfo = []
		let nian0 = ''
		let yue0 = ''
		if (yue == 0) {
			nian0 = nian - 1
			yue0 = 12
		} else {
			yue0 = yue
			nian0 = nian
		}
		for (let i = upnums; i <= upzongdays; i++) {
			let nyr = nian0 + '-' + yue0 + '-' + i
			let index = (daindaoarr.value).indexOf(nyr)
			let qiandao = false
			if (index != -1) {
				qiandao = true
			}
			upnuminfo.push({
				isqiandao: qiandao,
				nian: nian0,
				yue: yue0,
				days: i,
				nyr: nian0 + '-' + yue0 + '-' + i
			})

		}
		updays.value = upnuminfo

		// 获取下个月的数据
		// 本月最后一天是星期几
		let nowlastdays1 = new Date(nian, yue, nowlastday.value).getDay()
		// 获取下个月的天数 nextdays
		let lastnum = 6 - nowlastdays1
		let lastdays = []
		let yue1 = ''
		let nian1 = ''

		if (yue == 11) {
			yue1 = 1
			nian1 = nian + 1
		} else {
			yue1 = yue + 2
			nian1 = nian
		}

		for (let i = 1; i <= lastnum; i++) {
			let nyr = nian1 + '-' + yue1 + '-' + i
			let index = (daindaoarr.value).indexOf(nyr)
			let qiandao = false
			if (index != -1) {
				qiandao = true
			}
			lastdays.push({
				isqiandao: qiandao,
				nian: nian1,
				yue: yue1,
				days: i,
				nyr: nian1 + '-' + yue1 + '-' + i
			})
		}
		nextdays.value = lastdays
	}
</script>

<style lang="scss" scoped>
	.bred {
		border: 1px solid #f88;
		box-sizing: border-box;
	}

	.content {
		padding: 0 26rpx 0;
		min-width: 500rpx;
	}

	.top-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #ccc;
		padding-bottom: 20rpx;

		.qiandao {
			background-color: var(--tn-color-primary);
			color: #fff;
			padding: 10rpx 15rpx;
			border-radius: 10rpx;
		}
	}

	.weeks-box {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #ccc;

		.week-item {
			text-align: center;
			width: 98rpx;
		}
	}


	.day-box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		border-bottom: 1px solid #ccc;
		padding-bottom: 30rpx;
		padding-top: 30rpx;

		.tian {
			width: 14.2%;
			text-align: center;
			height: 90rpx;
			line-height: 90rpx;
		}

		// 今天的数据加上边框
		.jinri {
			position: relative;
			border: 1px solid #f88;
			background: #fee;
			transform: scale(0.8);
			border-radius: 10rpx;
			box-sizing: border-box;
			font-size: 40rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			line-height: 60rpx;
		}

		.jinri::after {
			content: '今日';
			font-size: 12px;
			position: absolute;
			top: 40rpx;
		}

		// 给点击的日期加上背景
		.isactive {
			border: 1px solid #f88;
			background: #fee;
			border-radius: 10rpx;
			transform: scale(0.8);
			font-size: 18px;
		}

		// 今日是否签到
		.isqiandao {
			color: #fff;
			background: #f77;
			transform: scale(0.8);
			font-size: 40rpx;
			border-radius: 10rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: center;
			line-height: 90rpx;
			line-height: 60rpx;
		}

		.isqiandao::after {
			content: '已签到';
			font-size: 12px;
			position: absolute;
			top: 40rpx;
		}

		.downday,
		.upday {
			color: #b1b1b1;
		}

	}
</style>